<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios入门与源码解析</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <!-- <script src="../axios.js"></script> -->
</head>

<body>
  <div class="container">
    <h2>axios源码解析</h2>
  </div>
  <script>
    // 构造函数
    function Axios(config) {
      // 初始化
      this.default = config; //为了创建default默认属性
      this.intercepters = {//拦截器
        request: {},
        response: {}
      }
    }
    // 往构造函数原型上添加相关方法
    Axios.prototype.request = function (config) {
      console.log('发送 AJAX 请求类型为：' + config.method)
    }
    Axios.prototype.get = function (config) {
      return this.request({ method: 'get' })
    }
    Axios.prototype.post = function (config) {
      return this.request({ method: 'post' })
    }

    // 声明函数
    function createInstance(config) {
      // 实例化一个对象
      let context = new Axios(config)//此时可以使用原型上的方法：contex.get() context.post()；但是不能当函数使用context()
      // 创建请求函数
      let instance = Axios.prototype.request.bind(context)//instance是一个函数并且可以instance({})此时instance不能instance.get()
      // 将Axios.prototype 对象中的方法添加到instance函数对象中
      Object.keys(Axios.prototype).forEach(key=>{
        instance[key] = Axios.prototype[key].bind(context)
      })
      // 为instance函数对象添加defauly 和 intercepters 属性
      Object.keys(context).forEach(key=>{
        instance[key] = context[key]
      })
      console.dir(instance)
      return instance
    }
    let axios = createInstance({})
    axios({method:'get'})
    axios.post()
  </script>
</body>

</html>